<template>
  <el-dialog
    title=""
    :visible.sync="centerDialogVisible"
    width="40%"
    center
  >
    <div>
      <div class="top">
        <h1>查看详情</h1>
      </div>
      <div class="content">
        <el-descriptions :column="1" border>
          <el-descriptions-item>
            <template slot="label">
              <span class="lit_lable">标题</span>
            </template>
            <span  class="lit_lable">{{detailsData.title}}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <span  class="lit_lable">姓名</span>
            </template>
            <span  class="lit_lable">{{detailsData.name}}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <span  class="lit_lable">手机号码</span>
            </template>
            <span class="lit_lable">{{detailsData.phone}}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <span  class="lit_lable">提交来源</span>
            </template>
            <span  class="lit_lable">{{detailsData.addr}}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <span  class="lit_lable">留言内容</span>
            </template>
            <span  class="lit_lable">{{detailsData.content}}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <span  class="lit_lable">IP地址</span>
            </template>
            <span  class="lit_lable">{{detailsData.ip}}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <span  class="lit_lable">提交时间</span>
            </template>
            <span  class="lit_lable">{{detailsData.addtime}}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "Popup",
  props: ["detailsData"],
  data() {
    var imgText = (rule, value, callback) => {
      if (!value.replace(/(^\s*)|(\s*$)/g, "")) {
        return callback(new Error("标题不能为空"));
      } else {
        callback();
      }
    };
    var imgSrc = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("图片不能为空"));
      } else {
        callback();
      }
    };
    return {
      centerDialogVisible: false,
      ruleForm: {
        id: "",
        imgText: "",
        imgSrc: "",
      },
      rules: {
        imgText: [{ validator: imgText, trigger: "blur" }],
        imgSrc: [{ validator: imgSrc, trigger: "blur" }],
      },
    };
  },
  methods: {
  },
};
</script>
<style scoped>
/deep/ .el-dialog__body {
  padding-top: 0;
}
/* 底部按钮 */
.footer_btn /deep/ .el-form-item__content {
  display: flex;
  justify-content: center;
  margin-left: 0px !important;
}
.lit_lable{
  margin-left:15px;
}
</style>